<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性监听器</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    {{fullname}}
    {{age}}
    <br/>
    {{fullname1()}}
    <br/>
    {{fullname2}}
    <br/>
    {{fullname3}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstname:"leo",
            lastname:"niu",
            age:26,
            fullname2:'leo niu'
        },
        //计算属性
        computed:{
            fullname:function () {
                console.log('+++1');
                return this.firstname +' '+this.lastname
            },
            fullname3:{
                get:function () {
                    return this.firstname +' '+this.lastname
                },
                set:function (value) {
                    var arr = value.split(' ');
                    this.firstname = arr[0];
                    this.lastname = arr[1];
                }
            }
        },
        methods:{
            fullname1:function () {
                return this.firstname +' '+this.lastname
            }
        },
        //侦听器
        watch:{
            firstname:function () {
                this.fullname2 = this.firstname + ' ' + this.lastname
            },
            lastname:function () {
                this.fullname2 = this.firstname + ' ' + this.lastname
            }
        }
    });
</script>
</body>
</html>